<template>
  <div>
    <div class="tishi">
      {{ user.name }}{{$t('Container_Executetocontainerusingcommand')}}{{ user.command }}中。
      <el-button style="background: #067FB5; color: #fff;" size="small" @click="websocketBack">断开连接</el-button>
    </div>
    <div class="cmd" v-if="user">
      <textarea rows="32" v-model="cmd" autofocus @keydown="myKeyup($event)" @keyup.13="sendMsg"></textarea>
      <textarea class="none" :class="hightShow ? 'hights' : ''" :rows="rows"></textarea>
    </div>
  </div>
</template>

<script>
// import Vue from 'vue'
export default {
  data () {
    return {
      cmdhead: '',
      rows: 0,
      hightShow: true,
      cmd: '', // 绑定到文本域
      path: '',
      str: '', // websocket发送的请求
      id: ''
    }
  },
  props: ['user'],
  mounted () {
    this.id = this.$route.params.id
    if (this.user.name === '') {
      // this.path = `ws://123.206.78.77:8080/ws?container=07adce022bcf&shell=${this.user.command}`
      this.path = `ws://123.206.78.77:8080/ws?container=6b0d69809eb0&shell=${this.user.command}`
    } else {
      this.path = `ws://123.206.78.77:8080/ws?container=${this.id}&shell=${this.user.command}&user=${this.user.name}`
    }
    // 进入页面调用websocket建立连接
    this.webSocket()
  },
  methods: {
    trim (str) { // 删除左右两端的空格
      return str.replace(/(^\s*)|(\s*$)/g, '')
    },
    // 判断是否禁用删除按钮
    myKeyup (e) {
      if (e.keyCode === 8) {
        let arr = this.cmd.split('\n')
        if (this.trim(arr[arr.length - 1]) === this.cmdhead) {
          e.stopPropagation() // 阻止事件冒泡传递
          e.preventDefault() // 阻止默认事件
        }
      }
    },
    // 敲下回车时
    sendMsg () {
      let arr = this.cmd.split('\n')
      let str = arr[arr.length - 2]
      // let arr2 = str.split('#')
      let arr2 = str.split('#')
      this.str = this.trim(arr2[arr2.length - 1])
      this.send()
    },
    // 告诉父组件，自己要断开连接
    websocketBack () {
      this.socket.close()
      this.$router.go(-1)
      // this.$emit('websocketBack')
    },
    // 建立 websocket
    webSocket () {
      if (typeof (WebSocket) === 'undefined') {
        alert('您的浏览器不支持socket')
        this.$router.go(-1)
      } else {
        // 实例化socket
        this.socket = new WebSocket(this.path)
        // 监听socket连接
        this.socket.onopen = this.open
        // 监听socket错误信息
        this.socket.onerror = this.error
        // 监听socket消息
        this.socket.onmessage = this.getMessage
      }
    },
    // 连接成功
    open: function () {
      // console.log('socket连接成功')
    },
    // 连接失败
    error: function () {
      this.$message({
        showClose: true,
        message: '连接失败！',
        type: 'error'
      })
      this.websocketBack()
    },
    // 获取后端发来的信息
    getMessage (msg) {
      // console.log(msg)
      let reader = new FileReader()
      reader.onload = (event) => {
        let content = reader.result // 内容就在这里
        if (this.user.command === '/bin/sh') {
          let a = content.slice(content.indexOf('#') + 1)
          content = content.replace(a, ' ')
          content = content.replace(/\[[0-9]\;[0-9][0-9]*/g, ' ')
          content = content.replace(/\[\m/g, ' ')
        }
        if (this.cmdhead === '') {
          this.cmdhead = this.trim(content)
        }
        this.cmd = this.cmd + content
        let arr = this.cmd.split('\n')
        this.rows = arr.length - 1
        this.hightShow = false
      }
      reader.readAsText(msg.data, 'utf-8')
    },
    // 发送信息
    send () {
      this.socket.send(this.str)
    },
    // 关闭连接
    close: function () {
      // console.log('socket已经关闭')
    }
  },
  beforeDestroy () {
    // 销毁监听
    this.socket.close()
    this.socket.onclose = this.close
  }
}
</script>

<style lang="scss" scoped>
.tishi{
  font-size: 18px;
}
.cmd{
  margin-top: 20px;
  position: relative;
  textarea{
    width: 100%;
    // height: 420px;
    background: #000;
    color: #fff;
  }
  .hights{
    height: 0;
    top: -100px;
  }
  .none{
    position: absolute;
    top: 0;
    opacity: 0;
  }
}
</style>
